<template>
  <div class="bigBox">
    <NavTabs msg="学生界面"></NavTabs>
    <div class="swipeBox">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item class="swipeImg">
          <img src="../assets/imgs/1.png" alt="" srcset="">

        </van-swipe-item>
       <van-swipe-item class="swipeImg">
          <img src="../assets/imgs/2.png" alt="" srcset="">

        </van-swipe-item>
          <van-swipe-item class="swipeImg">
          <img src="../assets/imgs/bg2.png" alt="" srcset="">

        </van-swipe-item>
             <van-swipe-item class="swipeImg">
          <img src="../assets/imgs/bg1.png" alt="" srcset="">

        </van-swipe-item>
      </van-swipe>
    </div>
    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
      个人信息</van-divider
    >
    <div class="infos">
      <van-space align="center" class="card" >
        <van-button type="primary">
            {{infos.name}}
        </van-button>
        <div class="cardinfo">
            学院：{{infos.collage}}
            <p>班级：{{infos.cls}}</p>
            <p>学号：{{infos.account}}</p>
        </div>
      </van-space>
    </div>

    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
      功能查询
    </van-divider>
    <div class="actionBox">
      <van-space direction="vertical" fill>
        <van-button type="success " @click="showPickerYear=true" block>成绩查询</van-button>
        <van-button type="primary  " @click="SetPasswordShow=true" block>密码修改</van-button>
        <van-button type="warning" @click="quit"  block>退出登录</van-button>
      </van-space>


    </div>

    <!-- 年份选择 -->
     <van-popup :show="showPickerYear" position="bottom">
        <van-picker
          :columns="years"
          @confirm="onConfirm"
          @cancel="showPickerYear = false"
        />
      </van-popup>
    <!-- 修改密码 -->
<van-dialog confirm-button-text="修改" @confirm="alterPassword" @cancel="SetPasswordShow=false" :show="SetPasswordShow" title="修改密码" show-cancel-button  >
   
   <div class="inputSearch">

    <van-field v-model="setPssword.username" label="姓名:"  disabled  />
    <van-field  v-model="setPssword.account" label="学号:" disabled  />
     <van-field  type="password"  v-model="setPssword.password1" label="新密码:" />
      <van-field  type="password"  v-model="setPssword.password2" label="确认新密码:" />
   </div>
   
    
</van-dialog>
    
  </div>
</template>
<script>
import { defineComponent } from "vue";
import { Toast } from "vant";
import NavTabs from "../components/NavTabs.vue";
import { info,SetPassword} from "../request/api";
import { useRouter,useRoute } from 'vue-router'

let router = useRouter()
export default defineComponent({
  components: {
    NavTabs,
  },
  data() {
    return {
      align: "center",
      infos: {
      },
    SetPasswordShow:false,
    showPickerYear:false,
    years : [],
    setPssword:{
  username:"",
  account:"",
  password1:"",
  password2:""
    }
    };
  },
  mounted() {
    this.infos=this.$route.query
  this.setPssword.username=this.infos.name
   this.setPssword.account=this.infos.account

  
  //自动添加年份
    const nowYear=new Date()
  let nowYearArr=nowYear.getFullYear()
  for(let i=2019;i<=nowYearArr;i++){
      this.years.push(i.toString())
  }
  this.years.reverse()
  
  },
  methods: {
    quit(){
      localStorage.clear("token")
       localStorage.clear("account")
       localStorage.clear("name")
    Toast.success("退出成功")
    setTimeout(()=>{
      this.$router.push({path: '/login'})
    },1000)
    },
    alterPassword() {
  // console.log(setPssword.value.username);
    if(this.setPssword.username!==""&&
      this.setPssword.account!==""&&
      this.setPssword.password1!==""&&
      this.setPssword.password2!==""
    ){
       SetPassword(this.setPssword).then(res=>{
          // console.log(res);
          if(res.data.code==='200'){
              Toast.success(res.data.msg)
                this.SetPasswordShow=false
                setTimeout(()=>{
                    this.quit()
                },1000)
              
          }else{
            Toast.fail(res.data.msg)
          }
       
          
        })
    }else{
      Toast.fail("请填入完整数据")
    }
},

onConfirm (value){
  // console.log(value);
     info(this.infos.account,value).then((res) => {
      // console.log(res);      
    });

  this.showPickerYear = false;
  
  this.$router.push({path: '/grade',query:{account:this.infos.account,schoolYear:value}})
}


  },

  
  
  //  info(localStorage.getItem("account"),localStorage.getItem("schoolYear")).then((res) => {
  //     const dataUserInfo=res.data.data
  //     if(dataUserInfo.code=="401"){
  //       Toast.fail(dataUserInfo.msg)
  //       setTimeout(()=>{
  //         localStorage.clear("token")
  //      localStorage.clear("account")
  //      localStorage.clear("name")
  //          router.push({ path: "/login"});
  //       },1000)
  //     } else{
  //       this.infos = dataUserInfo.data;
  //       // console.log(this.infos);
  //       if(this.infos==null){
  //         Toast.fail("该学年暂无成绩！")
  //        this.$router.push({ path: "/login"});
  //       }
  //        this.setPssword.username=dataUserInfo.data.name
  //         this.setPssword.account=dataUserInfo.data.account
           
  //     } 
            

  //   });
  
});
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;

  // line-height: 10rem;
  // text-align: center;
  // background-color: #39a9ed;
}
.actionBox {
  // width: 100%;
  // height: 10rem;
  // background: #39a9ed;
  padding: 1rem 2.5rem;
  
  //  font-weight: 700;
}
.swipeBox {
  padding: 1rem;
  height: 12rem;
  overflow: hidden;
  .swipeImg{
    width: 100%;
    height: 100%;
    overflow: hidden;
    img{
     width: 100%;
    height: 12rem;
    
      
    }
  }
}
.infos {
  padding: 0rem 1rem;
  
  .card{
    margin: 0px auto;
    padding: 16px; background: #f3f2f5;
          white-space:nowrap;
    width: 90%;
    
    .cardinfo{
        padding: 1rem 1.7rem;
         background: #fff;
         line-height: 1.8rem;
         height: 6rem;
         widows: 100%;
         white-space:nowrap;
         color: #39a9ed;
         font-weight: 600;
         overflow: hidden;
           border-radius: 0.8rem;
  box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem gainsboro;
    }
  }
  
}
</style>
